<template>
	<view class="container box">
		<view class="date">
			<uni-datetime-picker :clear-icon="false" @change="changeFn" v-model="date"
				type="date"></uni-datetime-picker>
		</view>
		<scroll-view scroll-y="true" class="detail" v-if="traindetails.length>0">
			<template v-for="(item,index) in traindetails">
				<view class="item-details">
					<view class="detail-item">
						<img :src="item.img" class="train-img" />
						<view class="detail-data">
							<view class="train-name">
								{{item.name}}
							</view>
							<view class="show-data">
								<view class="train-time">
									{{Math.floor(item.time/60)}}分钟<span v-if="item.time%60!=0">{{item.time%60}}秒</span>
								</view>
								<view class="train-calories">
									{{item.calorie}}千卡
								</view>
							</view>
						</view>

						<uni-icons @click="delFn(item.id,index)" type="trash" size="25" color="#aaadb6"
							class="del-train"></uni-icons>
					</view>
				</view>
			</template>
		</scroll-view>
		<view class="box-txt" v-else>
			暂无数据
		</view>
	</view>
</template>
<script>
	import {
		remove,
		compareDate,
		tranformDateTime,
		getTrainByDayData
	} from '../../../database/index.js'
	import healthInput from '@/components/healthInput.vue'
	export default {
		data() {
			return {
				currenetDate: '',
				date: '',
				traindetails: []
			}
		},
		async onPullDownRefresh() {
			this.currenetDate = ''
			this.date = ''
			this.traindetails = []
			this.currenetDate = new Date().toLocaleDateString().replace(/\//g, '-')
			this.date = this.currenetDate
			this.getTrain(this.currenetDate)
			uni.stopPullDownRefresh()
		},
		async onLoad() {
			this.currenetDate = new Date().toLocaleDateString().replace(/\//g, '-')
			this.date = this.currenetDate
			this.getTrain(this.currenetDate)
		},
		methods: {
			async delFn(id, index) {
				let isdel = await remove('sportTrain', {
					_id: id
				})
				if (isdel) {
					uni.showLoading({
						title: '加载中'
					})
					await this.getTrain(this.timeType, this.timeTrain)
					this.$showMsg('删除成功')
				} else {
					this.$showMsg('删除失败')
				}
			},
			async changeFn() {
				let today = new Date().toLocaleDateString().split('T')[0].replace(/\//g, '-')
				if (compareDate(tranformDateTime(new Date(this.date).toLocaleDateString()), today) == 1) {
					this.$showMsg('不能记录超过今天的日期')
					this.$forceUpdate()
					return
				} else {
					this.currenetDate = this.date
					this.getTrain(this.currenetDate)
				}
			},
			async getTrain(time) {
				this.traindetails = await getTrainByDayData(time)
				console.log(this.traindetails);
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0;
		display: flex;
		flex-direction: column;

		.detail {
			flex: 1;
			height: 1px;

			.item-details {
				padding: 20rpx;
				color: black;
				flex-direction: row;
				margin-bottom: 10rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.detail-item {
					padding: 25rpx;
					display: flex;
					flex-direction: row;
					background-color: white;
					position: relative;

					.detail-data {
						flex-direction: column;
						display: flex;
						height: 100rpx;
						justify-content: space-between;
					}

					.train-img {
						margin-right: 10rpx;
						width: 100rpx;
						height: 100rpx;
					}

					.del-train {
						position: absolute;
						top: 30%;
						right: 15rpx;
					}

					.show-data {
						display: flex;
						flex-direction: row;

						.train-time {
							margin-right: 10rpx;
						}

						.train-time,
						.train-calories {
							text-align: left;
							width: 130rpx;
							font-size: 0.78rem;
							color: $global_text;
						}
					}


				}
			}

		}
	}

	.box-txt {
		flex: 1;
		height: 1px;
		display: grid;
		place-items: center;
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
		color: $global_text;
	}
</style>